import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';

import DemoContainer from '@common/demoContainer';

export default function App({ route, navigation }: any) {
    const { params = {} } = route;

    const [enableProcessor, setEnableProcessor] = useState(true);
    useEffect(() => {
        return navigation.addListener('state', async () => {
            setEnableProcessor(false);
        });
    })


    // 忽略特定的警告
    console.warn = function (message) {
        if (message.includes('Overwriting fontSize style attribute preprocessor')) {
            return;
        }
    };

    // 设置新的处理器
    StyleSheet.setStyleAttributePreprocessor('fontSize', (value) => {
        if (enableProcessor && value === 18) {
            return 32;
        }
        return value;
    });
    return (
        <DemoContainer params={params}>
            <View style={styles.container}>
                <Text style={[styles.red, { fontSize: 18 }]}>
                    {t('api.StyleSheet.setStyleAttributePreprocessor.comparisonTextWithSize', { size: 18 })}
                </Text>
                <Text style={[styles.black, { fontSize: 32 }]}>
                    {t('api.StyleSheet.setStyleAttributePreprocessor.comparisonTextWithSize', { size: 32 })}
                </Text>
                <Text style={[styles.black, { fontSize: 20 }]}>
                    {t('api.StyleSheet.setStyleAttributePreprocessor.comparisonTextWithSize', { size: 20 })}
                </Text>
            </View>
        </DemoContainer>
    );
}

const styles = StyleSheet.create({
    container: {
    },
    red: {
        color: 'red',
    },
    black: {
        color: 'black',
    },
});